<template>
    <van-nav-bar title="编辑资料" left-arrow @click-left="onClickLeft()" />
    <!--设置滚动提示信息-->
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" scrollable="true">
        系统会先优化隐私保护机制，然后开放下面的编辑功能！
    </van-notice-bar>
    <!--头像部分-->
    <div class="avatar-box">
        <div class="avatar-inner-box" @click="changeAvatar()">
            <van-image :src="userInfo.avatar" width="6rem" height="6rem" round />
            <div class="camera-icon"><van-icon class-prefix="iconfont" name="camera" /></div>
        </div>
    </div>
    <!--设置项-->
    <van-cell v-for="(item) in settingList" v-bind:key="item.tag" is-link :title="item.tag" :value="item.value"
        @click="changeUserInfo()"></van-cell>
</template>
<script setup>
import { showToast } from "vant";
import { ref } from "vue"
import { useRouter } from 'vue-router';
const router = useRouter();
let userInfo = ref(JSON.parse(localStorage.getItem('userInfo')));
const settingList = ref([
    {
        tag: "姓名",
        value: userInfo.value.username
    },
    {
        tag: "简介",
        value: "有趣的简介可以吸引粉丝"
    }, {
        tag: "性别",
        value: ["隐藏", "男", "女"].filter((item, index) => {
            return index == userInfo.value.gender;
        })
    },
    {
        tag: "职业",
        value: userInfo.value.job
    },
    {
        tag: "背景图",
        value: "上传主页背景图"
    },
    {
        tag: "穿搭信息(仅自己可见)",
        value: userInfo.value.fitInfo
    }
])

function changeUserInfo() {
    showToast("即将开放，敬请期待~")
}
function onClickLeft() {
    console.log("返回上一级路由被点击~");
    router.back();
}
function changeAvatar() {
    console.log("修改用户头像");
}
</script>
<style>
.van-cell__title {
    text-align: left;
}

.avatar-box {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.avatar-inner-box {
    position: relative;
}

.camera-icon {
    position: absolute;
    border-radius: 50%;
    bottom: 5px;
    right: 5px;
    background: #333;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>